import React, { Component } from 'react'
import {reqgoodsinfo,reqcartadd} from '../../request/api'
import {filterPrice} from "../../filters/index"
import Header from '../../components/Header/Header';
import './Detail.less'
import {imgPre} from "../../request/http"
import { List,Image,Swiper,Badge,TabBar,Button,Toast } from 'antd-mobile'
import {
    MessageOutline,
    UnorderedListOutline,
    TruckOutline
  } from 'antd-mobile-icons'

export default class Detail extends Component {
    constructor(){
        super();
        this.state={
            info:{},
            images:[],
            isshow:false,
            tabs:[
                {
                  key: '1',
                  title: '客服',
                  icon: <MessageOutline />,
                  badge: Badge.dot,
                },
                {
                  key: '2',
                  title: '店铺',
                  icon: <UnorderedListOutline />,
                  badge: '5',
                },
                {
                  key: '3',
                  title: '购物车',
                  icon: <TruckOutline />,
                  badge: '99+',
                },
                {
                  key: '4',
                  title: <Button color='warning' onClick={this.shows}>加入购物车</Button>
                },
                {
                    key: '5',
                    title: <Button color='danger' onClick={()=>{this.props.history.push("/Orders")}}>立即购买</Button>
                  }
              ]
        }
    }
    cartadd(e,info){
        let obj =sessionStorage.getItem("isLogin");
        let objp = JSON.parse(obj);
        
        reqcartadd({uid:objp.uid,type:1,goodsid:info.id,num:1}).then(d=>{
            Toast.show({content:d.data.msg})
        })
    }
    //显示隐藏
    shows=()=>{
        if(this.state.isshow===true){
            this.setState({
                isshow:false
            })  
        }else{
            this.setState({
                isshow:true
            }) 
        }
    }
    componentDidMount(){
        let params = this.props.match.params;
        reqgoodsinfo({id:params.id}).then(d=>{
            if(d.data.code===200){
                let obj=d.data.list[0];
                // obj.specsattr = obj.specsattr.split(",");
                this.setState({
                    info:obj
                },)
                // ()=>{
                //    this.des.current.innerHTML=this.state.info.description;
                //     console.log(this.state.info.description);
                    
                // })
                
            }else{
                console.log(d.data.msg);
            }
        })
    }
    render() {
        let {info,images,tabs,isshow}=this.state;
        
        images.push(this.state.info.img);
        return (
            <div>
                <Header title={info.goodsname} back></Header>
                <div className="detail">
                    {/* 轮播图 */}
                    <Swiper style={{"--height":"4rem"}} 
                        indicator={(total, current) => (
                            <div className="customIndicator">
                                {`${current + 1} / ${total}`}
                            </div>
                        )}>
                        {images.map((item,ind) => {
                            return (
                                <Swiper.Item key={ind}>
                                    <img src={imgPre+item} alt="" />
                                </Swiper.Item>
                            );
                        })}
                    </Swiper>
                    <div>
                        <h3>{info.description}</h3>
                        <span>原价：{info.market_price?<del>{filterPrice(info.market_price)}</del>:null}</span>
                        <p><span>现价：{info.price}</span></p>
                    </div>
                    {/* 底部栏 */}
                    <TabBar>
                        {tabs.map(item => (
                            <TabBar.Item
                            key={item.key}
                            icon={item.icon}
                            title={item.title}
                            badge={item.badge}
                            />
                        ))}
                    </TabBar>
                    {/* 弹出层 */}
                    <div className="jbox" onClick={this.shows} style={{display:isshow?"block":"none"}}>
                        <div className="jumpbox">
                            <List.Item
                                prefix={
                                    <Image
                                    src={imgPre+info.img}
                                    fit='cover'
                                    width={80}
                                    height={80}
                                    />
                                }
                                >
                                {info.goodsname}
                            </List.Item>
                            <Button color='warning' onClick={(e)=>{this.cartadd(e,this.state.info)}}>加入购物车</Button>
                        </div>
                    </div>
                </div>

            </div>
        )
    }
}
